<template>
    <div class='login'>
        <div class="up">
            <span @click='onBack'>
                <svg data-v-07814981="" data-v-74de0437="" fill="none" viewBox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="svg-icon">
                <path xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" d="M4.70613 11.2927L3.99902 11.9997L4.70606 12.7069L11.999 20.0008L13.4133 18.5867L7.82744 13.0001H19.9999V11.0001H7.82729L13.4144 5.41328L12.0002 3.99902L4.70613 11.2927Z" fill="currentColor"></path>
                </svg>
            </span>
            <div class="text">
                <h2>欢迎来到<span>宜家</span>
                </br>很高兴您来到这里
                </h2>   
            </div>
        </div>
        <div class="input">
            <div class="inpt">
                <input type="tel" placeholder="手机号" maxlength="11"> 
                <span class="hide">手机号不能为空</span>   
            </div>
            <div class="inpt-code">

            </div>
            <div class="inpt inpt-code">
                <input type="tel" placeholder="验证码" maxlength="6">
                <span class="hide"> 请输入正确的验证码</span>
            </div>
        </div>
         <div class="checkbox">
             <div class="check"><van-checkbox v-model="checked" checked-color="#0058a3" icon-size="24px"></van-checkbox></div> 
             <p>我已接收并同意宜家  <a href="">隐私条款</a></p></div>
         <div class="button">
             <van-button round type="info" size="large" color="#0058a3" to="/shoppingCar">登录/注册</van-button></div>
        <p></p>
    </div>
</template>

<script>
import Vue from 'vue';
import { Button ,Checkbox, CheckboxGroup} from 'vant';

Vue.use(Button);
Vue.use(Checkbox);
Vue.use(CheckboxGroup);

export default {
    data() {
        return {
        checked:true,
        };
    },
    methods:{
        onBack(){
            this.$router.go(-1)
        }
    },
    components: {},
    created(){},
    mounted(){},
    
    }
</script>
<style lang='stylus' scoped>
.login{
    height 100vh
    .button{
        margin-top 0.5rem
        text-align center
        height 0.46rem !important
        .van-button--large{
            width 100%
            background: #0058a3 !important;
            color #FFF !important
        }
        .van-button__text{
            color #FFF
        }
    }
}
.up 
    background: #0058a3;
    height: 1.82rem;
    position: relative;
    &>span 
        position: absolute;
        z-index: 19;
        top: 0.28rem;
        left: 0.19rem;
        width: 0.48rem;
        height: 0.48rem;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        background-color: #fff;
    .text 
        h2 
            line-height: 0.32rem;
            font-size: 0.24rem;
            color: #fff;
            font-weight: 700;
            padding: 0.88rem 0.19rem 0.3rem;
            span 
                color: #ffd800;
                margin-left: 0.075rem;
.input
    margin: .24rem .28rem .1rem;        
    .inpt
        border-bottom: 1px solid #dfdfdf;
        width: 100%;
        font-size: .16rem;
        white-space: nowrap;
        color: #111;
        line-height: .24rem;
        background: #fff;
        padding 0.21rem 0
        input
            outline: none;
            border: none;
            border-radius: 0;
            font-size: .12rem;
            height: .2rem;
            line-height: .16rem;
            display: block;
            padding-bottom: .03rem;
            width 100%
            
        &>button 
            background: #fff!important;
            border: 1px solid #dfdfdf!important;
            color: #dfdfdf!important;
            // background: #111;
            border-radius: .28rem;
            font-size: .14rem;
            font-weight: 500;
            color: #fff;
            padding: .11rem .1rem;
            min-width: 1.22rem;
            line-height: .22rem;
            height: auto;
            outline: none;
            border: none;
        .hide
            display none
    .inpt-code
        display flex
.checkbox
    margin: .24rem .28rem .1rem; 
    display flex
    p 
        font-size: 12px;
        color: #666;
        padding-left 0.1rem 
        line-height 0.24rem
.button
    margin: .24rem .28rem .1rem;
    opacity: .5;
  
        
</style>
<style lang="stylus">
//  .van-button__text
//     width 100%
//     height .56rem
//     background #0058a3
//     color:#fff;
//     font-weight: 600;


</style>
